<template>
	<view class="fixed_container">
		<view style="display: flex;justify-content: center;">
			<avatar
				:bgImage="imgBg"
				v-if="fixedObj.imagePath"
				selWidth="200px" selHeight="200px"  ref='avatar' fileType='png'
				:avatarSrc="`${imageUrl}${fixedObj.imagePath}`" @upload="myUpload" quality="1" inner=true
				avatarStyle="width: 200px; height: 200px; margin: 40px;">
			</avatar>
			<avatar
				:bgImage="imgBg"
				v-else
				selWidth="200px" selHeight="200px"  ref='avatar' fileType='png'
				:avatarSrc="`${imgUrls}avator.png`" @upload="myUpload" quality="1" inner=true
				avatarStyle="width: 200px; height: 200px; margin: 40px;">
			</avatar>
		</view>
		<view class="save_btn">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="saveFixed">保存修改</button>
		</view>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {userinfo,updateAvatar} from '../../common/api/index.js'
	import {imgURL,requestURL} from '../../common/utils/config.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import avatar from "../../components/img-cropping/cropping.vue"
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				fixedObj: {
					imagePath: ''
				},
				imgBg: `${imgURL}/mini_image_file/avator.png`,
				imgUrls: `${imgURL}/mini_image_file/`,
				imageUrl: `${requestURL}/ecm/api/app/pic/`,
				content1: '',
				title1: '',
				showMcModal1: false
			}
		},
		onLoad:function(option){
			this.fixedObj.imagePath = option.imagePath
		},
		components: {
			avatar,
			tmcModal
		},
		methods: {
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			myUpload(obj) {
				_showLoading('上传中,请稍后...')
				let that = this
				uni.uploadFile({
					url: requestURL + '/ecm/api/app/srcb/appsrcbsign/uploadFile',
					filePath: obj.path,
					// #ifdef MP-ALIPAY
					fileType: 'image',
					// #endif
					name: 'file',
					// #ifdef MP-WEIXIN
					header: {
						"Content-Type": "multipart/form-data"
					},
					// #endif
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						if(res.code == 0) {
							uni.hideLoading()
							_showToast('上传成功')
							that.fixedObj.imagePath = res.data
						} else {
							uni.hideLoading()
							_showToast('上传失败')
						}
					},
					complete:function(){
						uni.hideLoading()
					}
				});
			},
			saveFixed() {
				let s_userId = uni.getStorageSync('s_userId')
				uni.showLoading()
				userinfo({
					imagePath: this.fixedObj.imagePath,
					userId: s_userId 
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/me/me'
						})
					} else {
						uni.hideLoading()
						this.showTxt('修改失败', res.msg)
					}
				}).catch(err => {
					this.showTxt('修改失败', '系统错误!')
				})
			}
		}
	}
</script>

<style>
	.fixed_container {
		padding: 100rpx;
	}
	.btn_pri {
		border-radius: 30rpx;
		margin-top: 60rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		width: 90%;
		font-size: 26rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
		border-radius: 8rpx;
	}
	.fixed_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 80rpx;
		box-shadow: 5px 5px 5px rgba(215, 215, 215, 0.349019607843137);
		border: 1px solid rgba(242, 242, 242, 1);
	}
	.bt_image {
		width: 200px;
		height: 200px;
		border-radius: 10rpx;
	}
	.shang_btn {
		width: 220rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 150, 215, 0.349019607843137);
	}
	.shang_txt {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}
	.box_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.box_item_txt {
		display: flex;
		justify-content: flex-start;
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin: 30rpx 0 15rpx 0;
	}
</style>
